<template>
  <el-dialog class="version-header" width="108rem" style="top: -11%;"
             :before-close="dialogClosed"
             destroy-on-close
             :close-on-click-modal="false"
             v-model="dialogVisible">
    <template #header>
      <div class="publish-info" v-if="latestVersion">
        <div class="publish-user" v-if="switchForm!=='3'">
          <div class="publish-name">发布人员：<span
              style="font-weight: bold">{{
              switchForm === '1' ? latestVersion.publisher : ((switchForm === '2' && editMode === 1) ? user.nickName : latestVersion.publisher)
            }}</span>
          </div>
          <div class="publish-time" v-if="switchForm==='1'">发布时间:
            <div style="margin-left: 1rem">{{ latestVersion.publishTime }}</div>
          </div>
        </div>
        <div style="display: flex;align-items: center">
          <el-select v-model="selectVersion" v-if="switchForm==='1'" class="version-select"
                     @change="selectVersionChange" placeholder="选择版本">
            <el-option v-for="(updateRecord,index) in UpdateRecordList"
                       :key="index"
                       :label="updateRecord.version"
                       :value="updateRecord.id">
            </el-option>
          </el-select>
          <el-button class="show-all-version" type="danger" @click="showAll" v-if="switchForm==='1'">
            查看所有版本
          </el-button>
        </div>
      </div>
    </template>
    <el-card class="update-card" shadow="never">
      <template #default>
        <div class="version-info" v-if="switchForm==='1'&&latestVersion">
          <div class="version-text">
            <div>V{{ latestVersion.version }}</div>
            <!--            <div style="font-size: 1.7rem;margin-right: 10rem;color: #398cd4;">更新于 {{-->
            <!--                latestVersion.startTime-->
            <!--              }}-->
            <!--            </div>-->
            <div style="display: flex" v-hasRole="['zhilian-admin']">
              <div style="display: flex" v-if="switchForm!=='2'&&latestV.id===selectVersion"
              >
                <el-button class="new-link" type="warning" v-if="!showEdit" @click="clickNewVersion(2)">编辑</el-button>
                <el-button class="new-link" type="success" @click="clickNewVersion(1)">发布新版本
                </el-button>
              </div>
            </div>

          </div>

          <div class="features" v-if="latestVersion.hasNewFunction===1">新增功能</div>
          <div class="table-head" v-if="latestVersion.hasNewFunction===1">
            <div class="table-column-module">更新页面</div>
            <div class="table-column-content">更新内容</div>
            <div class="table-column-author">更新人员</div>
          </div>
          <div v-for="(item,index) in  latestVersion.versionDetails" :key="index">
            <div class="features-item" v-if="item.updateType==='新增功能'">

              <!--            <div class="features-item-detail">{{ item.updateModule }} : {{ item.updateContent }} by {{ item.updateBy }}-->
              <!--            </div>-->

              <div class="features-item-detail">
                <div class="text-update-module">{{ item.updateModule }}</div>
                <div class="text-update-updateContent">{{ item.updateContent }}</div>
                <div class="text-update-updateBy">{{ item.updateBy }}</div>
              </div>
            </div>
          </div>
          <div class="features optimize-and-repair" v-if="latestVersion.hasNewBugFix===1">优化与BUG修复</div>
          <div class="table-head" v-if="latestVersion.hasNewBugFix===1">
            <div class="table-column-module">更新页面</div>
            <div class="table-column-content">更新内容</div>
            <div class="table-column-author">更新人员</div>
          </div>
          <div v-for="(item,index) in  latestVersion.versionDetails" :key="index">
            <div class="features-item" v-if="item.updateType==='优化与BUG修复'">

              <div class="features-item-detail">
                <div class="text-update-module">{{ item.updateModule }}</div>
                <div class="text-update-updateContent">{{ item.updateContent }}</div>
                <div class="text-update-updateBy">{{ item.updateBy }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="new-version" v-if="switchForm==='2'">
          <div class="version-form">
            <el-form :model="updateRecordForm" ref="updateForm" label-position="right" :rules="rules"
                     label-width="10rem">
              <el-form-item label="版本号" prop="version">
                <el-input v-model="updateRecordForm.version" :disabled="true" placeholder="请输入版本号"
                          class="version-input">
                </el-input>
                <!--                <div class="latest-version" v-if="editMode===1">最新版本： {{ latestVersion?.version }}</div>-->
                <!--                <div class="latest-version" style="color: #ff3b3b !important;" v-if="editMode===2">编辑模式</div>-->
              </el-form-item>
              <el-form-item label="详细内容" class="update-content-form" prop="versionDetails">
                <template #default>
                  <div
                      style=" width: 100%;  overflow: auto; max-height: 51rem;border: 1px solid var(--el-card-border-color);padding: 2rem !important;">
                    <transition-group name="el-zoom-in-top">
                      <div class="card-info" v-for="(detail,index) in updateRecordForm.versionDetails" :key="index">
                        <el-card class="version-details-card" shadow="never">
                          <div class="version-form-type">
                            <el-form-item label="更新类型" :prop="`versionDetails.${index}.updateType`"
                                          :rules="rules.updateType">
                              <el-radio-group class="update-type-radio" size="default" v-model="detail.updateType">
                                <el-radio-button label="新增功能"/>
                                <el-radio-button label="优化与BUG修复"/>
                              </el-radio-group>
                            </el-form-item>
                          </div>
                          <div class="version-form-module-author">
                            <el-form-item label="更新页面" :prop="`versionDetails.${index}.updateModule`"
                                          :rules="rules.updateModule">
                              <el-input show-word-limit v-model="detail.updateModule" placeholder="" label="module"
                                        :input-style="detail.updateModule.length===moduleMaxlen&&moduleFoc?'box-shadow: 0 0 0 1px red inset':''"
                                        type="textarea" :rows="1"
                                        :autosize="{maxRows: 1 }"
                                        resize="none"
                                        @focus="moduleFoc=true"
                                        @blur="moduleFoc=false"
                                        :maxlength="moduleMaxlen">
                              </el-input>
                            </el-form-item>
                          </div>
                          <div class="version-form-module-author">
                            <el-form-item label="更新人员" :prop="`versionDetails.${index}.updateBy`"
                                          :rules="rules.updateBy">
                              <el-input show-word-limit v-model="detail.updateBy"
                                        placeholder="" label="author"
                                        :input-style="detail.updateBy.length===personMaxlen&&personFoc?'box-shadow: 0 0 0 1px red inset':''"
                                        type="textarea" :rows="1"
                                        :autosize="{maxRows: 1 }"
                                        resize="none"
                                        @blur="personFoc=false"
                                        @focus="personFoc=true"
                                        :maxlength="personMaxlen">
                              </el-input>
                            </el-form-item>
                          </div>
                          <div class="version-form-content">
                            <el-form-item label="更新内容" :prop="`versionDetails.${index}.updateContent`"
                                          :rules="rules.updateContent">
                              <el-input v-model="detail.updateContent"
                                        :input-style="detail.updateContent.length===contentMaxlen&&contentFoc?'box-shadow: 0 0 0 1px red inset':''"
                                        :autosize="{minRows:2,maxRows: 8}"
                                        @focus="contentFoc=true"
                                        @blur="contentFoc=false"
                                        type="textarea" show-word-limit :maxlength="contentMaxlen"
                                        placeholder="" label="content">
                              </el-input>
                            </el-form-item>
                          </div>
                        </el-card>
                        <el-button class="delete-details-item" @click="deleteItem(index)" circle>
                          <el-icon>
                            <Delete></Delete>
                          </el-icon>
                        </el-button>
                      </div>
                      <div class="operate-button">
                        <el-button @click="addItem" circle>
                          <el-icon>
                            <Plus></Plus>
                          </el-icon>
                        </el-button>
                      </div>
                    </transition-group>
                  </div>
                </template>

              </el-form-item>
            </el-form>
          </div>
          <div style="margin-bottom: 2rem;float:right">
            <el-button type="primary" @click="submitForm(updateForm)">确定</el-button>
            <el-button class="cancel-button" @click="cancelNew">取消</el-button>
            <el-button class="reset-button" v-if="editMode===1" @click="resetForm(updateForm)">重置</el-button>
          </div>
        </div>
        <div class="version-line" v-if="switchForm==='3'">
          <el-timeline class="time-line">
            <el-timeline-item v-for="(version,index) in UpdateRecordList" :key="index" class="time-line-item"
                              :timestamp="'V'+version.version"
                              placement="top">
              <el-card class="time-line-card" shadow="never">
                <!--                <div style="font-size: 1.7rem;color: #398cd4;">更新于 {{ latestVersion.startTime }}</div>-->
                <div class="time-line-publish"><span class="time-line-per">发布人员：{{ version.publisher }}</span><span
                    class="time-line-publishTime">发布时间：{{ version.publishTime }}</span></div>
                <div class="features" v-if="version.hasNewFunction===1">新增功能</div>
                <div class="table-head" style="margin-top: 1.2rem !important;" v-if="version.hasNewFunction===1">
                  <div class="table-column-module">更新页面</div>
                  <div class="table-column-content">更新内容</div>
                  <div class="table-column-author">更新人员</div>
                </div>
                <div v-for="(item,index) in  version.versionDetails" :key="index">
                  <div class="features-item" v-if="item.updateType==='新增功能'">

                    <div class="features-item-detail">
                      <div class="text-update-module">{{ item.updateModule }}</div>
                      <div class="text-update-updateContent">{{ item.updateContent }}</div>
                      <div class="text-update-updateBy">{{ item.updateBy }}</div>
                    </div>
                  </div>
                </div>
                <div class="features optimize-and-repair" v-if="version.hasNewBugFix===1">优化与BUG修复</div>
                <div class="table-head" style="margin-top: 1.2rem !important;" v-if="version.hasNewBugFix===1">
                  <div class="table-column-module">更新页面</div>
                  <div class="table-column-content">更新内容</div>
                  <div class="table-column-author">更新人员</div>
                </div>
                <div v-for="(item,index) in  version.versionDetails" :key="index">
                  <div class="features-item" v-if="item.updateType==='优化与BUG修复'">
                    <div class="features-item-detail">
                      <div class="text-update-module">{{ item.updateModule }}</div>
                      <div class="text-update-updateContent">{{ item.updateContent }}</div>
                      <div class="text-update-updateBy">{{ item.updateBy }}</div>
                    </div>
                  </div>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
          <el-button class="return-button cancel-button"
                     @click="switchForm='1'"
                     v-if="switchForm==='3'">返回
          </el-button>
        </div>
      </template>
    </el-card>
  </el-dialog>
</template>
<script setup name="VersionUpdate">
import {computed, inject, nextTick, onMounted, reactive, ref, watch} from "vue";
import useUserStore from "@/store/modules/user";
import {storeToRefs} from "pinia";
import FrontApi from "@/api/front";
import {useDateFormat, useNow} from "@vueuse/core";
import {ElMessage} from "element-plus";

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update'])

const dialogVisible = ref(props.visible)

watch(() => props.visible, (val) => {
  dialogVisible.value = val
})

const store = useUserStore()
const {user} = storeToRefs(store)
const selectVersion = ref()
const latestV = ref()
const switchForm = ref('1')
const latestVersion = ref()
const editMode = ref(1)
const latest = inject("latestVersion");
const moduleMaxlen = ref(10)
const personMaxlen = ref(4)
const contentMaxlen = ref(200)
const moduleFoc = ref(false)
const personFoc = ref(false)
const contentFoc = ref(false)

const updateRecordForm = reactive({
  id: null,
  version: "",
  publisher: "",
  publishTime: null,
  type: "",
  // startTime: "",
  endTime: "",
  versionDetails: [{updateType: "新增功能", updateModule: "", updateContent: "", updateBy: ""}]
})

const UpdateRecordList = ref([])

const validateVersion = (rule, value, cb) => {
  if (editMode.value === 2) {
    cb()
  }
  if (value === undefined || !value || value === '') {
    cb("请输入版本号")
  } else {
    const versionArr = value.split('.')
    if (versionArr.length !== 3) {
      cb("版本号格式错误")
    } else {
      const versionNum = versionArr.map(item => {
        return Number(item)
      })
      if (!(versionNum[0] >= 1 && versionNum[0] <= 9) || !(versionNum[1] >= 0 && versionNum[1] <= 9) || !(versionNum[2] >= 0 && versionNum[2] <= 9)) {
        cb("版本号格式错误")
      } else {
        if (latestVersion.value && latestVersion.value.version) {
          const latestVersionArr = latestVersion.value.version.split('.')
          const latestVersionNum = latestVersionArr.map(item => {
            return Number(item)
          })
          // versionNum比latestVersionNum数组中的任意一项大
          if (versionNum[0] > latestVersionNum[0] || versionNum[1] > latestVersionNum[1] || versionNum[2] > latestVersionNum[2]) {
            cb()
          } else {
            cb("版本号必须大于当前最新版本号")
          }
        } else {
          cb()
        }
      }
    }

  }
}


const dialogClosed = (done) => {
  emit('update', false)
  done()
}

const validateLimit = (rule, value, cb) => {
  if (value.length === contentMaxlen.value && contentFoc.value) {
    cb("已到达字数限制")
  } else {
    cb()
  }
}
const validateLimit2 = (rule, value, cb) => {
  if (value.length === moduleMaxlen.value && moduleFoc.value) {
    cb("已到达字数限制")
  } else {
    cb()
  }
}
// const validateLimit3 = (rule, value, cb) => {
//   if (value.length === personMaxlen.value) {
//     cb("已到达字数限制")
//   } else {
//     cb()
//   }
// }
const validateUpdateContent = (rule, value, cb) => {
  if (value === undefined || !value || value.trim() === '') {
    cb("请输入更新内容")
  } else {
    cb()
  }
}

const validateUpdateBy = (rule, value, cb) => {
  if (value === undefined || !value || value.trim() === '') {
    cb("请输入更新人员")
  }
  if (value.length === personMaxlen.value && personFoc.value) {
    cb("已到达字数限制")
  } else {
    cb()
  }
}

const validateUpdateModule = (rule, value, cb) => {
  if (value === undefined || !value || value.trim() === '') {
    cb("请输入更新页面")
  } else {
    cb()
  }
}

const rules = reactive({
  version: [
    {validator: validateVersion, required: true, trigger: 'blur'}
  ],
  updateType: [
    {required: true, message: '请选择更新类型', trigger: 'change'}
  ],
  updateModule: [
    {validator: validateUpdateModule, required: true, trigger: 'change'},
    {validator: validateLimit2, required: true, trigger: 'change'}
  ],
  updateContent: [
    {validator: validateUpdateContent, required: true, trigger: 'blur'},
    {validator: validateLimit, required: true, trigger: 'change'}

  ],
  updateBy: [
    {validator: validateUpdateBy, required: true, trigger: 'change'},
  ]
})


const updateForm = ref(null)

const submitForm = (formName) => {
  moduleFoc.value = false
  personFoc.value = false
  contentFoc.value = false
  formName.validate((valid) => {

    if (valid) {
      if (editMode.value === 1) {
        updateRecordForm.versionDetails.forEach(item => {
          if (item.updateBy === "") {
            item.updateBy = user.value.nickName
          }
        })
        updateRecordForm.publisher = user.value.nickName
        let {now} = useNow()
        updateRecordForm.publishTime = useDateFormat(now, 'YYYY-MM-DD HH:mm:ss')
        FrontApi.addUpdateRecord(updateRecordForm).then(res => {
          if (res.data) {
            ElMessage.success("发布成功")
            latest.value = updateRecordForm.version
            cancelNew()
            moduleFoc.value = false
            personFoc.value = false
            contentFoc.value = false
          } else {
            ElMessage.error("发布失败")
            moduleFoc.value = true
            personFoc.value = true
            contentFoc.value = true
          }
        })
      }
      if (editMode.value === 2) {
        updateRecordForm.id = latestVersion.value.id
        updateRecordForm.publisher = latestVersion.value.publisher
        FrontApi.updateUpdateRecord(updateRecordForm).then(res => {
          if (res.data) {
            ElMessage.success("更新成功")
            cancelNew()
            moduleFoc.value = false
            personFoc.value = false
            contentFoc.value = false
          } else {
            moduleFoc.value = true
            personFoc.value = true
            contentFoc.value = true
            ElMessage.error("更新失败")
          }

        })
      }
    } else {
      console.log('error submit!!');
      moduleFoc.value = true
      personFoc.value = true
      contentFoc.value = true
      return false;
    }
  });
}

const showEdit = computed(() => {
  const oneDay = 48 * 60 * 60 * 1000;
  return (new Date(new Date().getTime() - oneDay).getTime() > new Date(latestVersion.value.publishTime).getTime())
})


const showAll = () => {
  switchForm.value = '3'
  nextTick(() => {
  })
}

const clickNewVersion = (mode) => {
  const oneDay = 48 * 60 * 60 * 1000;
  if ((new Date(new Date().getTime() - oneDay).getTime() > new Date(latestVersion.value.publishTime).getTime()) && mode === 2) {
    ElMessage.error("已超出48小时编辑期限")
    return
  }

  nextTick(() => {
    if (mode === 2) {
      updateRecordForm.version = latestVersion.value.version
      // updateRecordForm.startTime = latestVersion.value.startTime
      updateRecordForm.versionDetails = latestVersion.value.versionDetails
    } else {
      updateRecordForm.publisher = user.value.nickName
      // latestVersion.value.version 最后的数字+1但不能超过9
      const latestVersionArr = latestVersion.value.version.split('.')
      const latestVersionNum = latestVersionArr.map(item => {
        return Number(item)
      })
      if (latestVersionNum[2] < 9) {
        latestVersionNum[2] = latestVersionNum[2] + 1
      } else {
        latestVersionNum[2] = 0
        if (latestVersionNum[1] < 9) {
          latestVersionNum[1] = latestVersionNum[1] + 1
        } else {
          latestVersionNum[1] = 0
          latestVersionNum[0] = latestVersionNum[0] + 1
        }
      }
      updateRecordForm.version = latestVersionNum.join('.')
      console.log(updateRecordForm.version)
    }
  })
  editMode.value = mode
  switchForm.value = '2'
}

const selectVersionChange = (id) => {
  FrontApi.getUpdateRecordById(id).then(res => {
    latestVersion.value = res.data
  })
}

const addItem = () => {
  updateRecordForm.versionDetails.push(reactive({
    updateType: "新增功能",
    updateModule: "",
    updateContent: "",
    updateBy: ""
  }))
}

const cancelNew = () => {
  switchForm.value = "1"
  resetForm(updateForm.value);
  updateRecordForm.versionDetails = [{updateType: "新增功能", updateModule: "", updateContent: "", updateBy: ""}]
  getList()
}

const resetForm = (form) => {
  form.resetFields();
  moduleFoc.value = false
  personFoc.value = false
  contentFoc.value = false
  // updateRecordForm.version = ""
  // updateRecordForm.startTime = ""
  // updateRecordForm.versionDetails = [{updateType: "新增功能", updateModule: "", updateContent: "", updateBy: ""}]
}

const deleteItem = (index) => {
  if (updateRecordForm.versionDetails.length <= 1) {
    ElMessage.error("唯一保留项，无法删除")
    return false
  }
  updateRecordForm.versionDetails.splice(index, 1);
}

const getList = () => {
  FrontApi.getUpdateRecordList().then(res => {
    UpdateRecordList.value = res.data
    if (res.data[0]) {
      latestV.value = res.data[0]
      latestVersion.value = res.data[0]
      selectVersion.value = res.data[0].id
    }
  })
}

getList()

onMounted(() => {

})

</script>
<style scoped lang="scss">


.update-card {
  width: 100%;
}

.publish-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.publish-name {
  font-size: 2rem;
}

.publish-time {
  display: flex;
  margin-top: 1rem;
  font-size: 1.8rem;
}

.update-card :deep(.el-card__body:first-child) {
  padding: 3rem;
  padding-top: 1rem;
}

.version-details-card :deep(.el-card__body) {
  padding: 2rem !important;
}

.version-info {
  .features {
    font-size: 2.3rem;
    font-weight: bold;
  }

  .features-item {
    display: flex;
    margin-top: 1rem;
    align-items: flex-start;
  }

  .features-item:first-child {
    margin-top: 2rem !important;
  }

  .optimize-and-repair {
    margin-top: 3rem;
  }

  .features-item-icon {
    color: #898585;
    margin-right: 1rem;
    margin-top: 0.5rem;

  }

  .table-head {
    display: flex;
    font-weight: bold;
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--el-text-color-regular);
  }

  .table-column-module {
    width: 20%;
  }

  .table-column-content {
    width: 59%;
  }

  .features-item-detail {
    font-size: 1.8rem;
    display: contents;
    align-items: center;
    justify-content: flex-start;
  }

  .text-update-module {
    width: 17%;
    margin-right: 3rem;
  }

  .text-update-updateContent {
    width: 55%;
  }

  .text-update-updateBy {
    min-width: 20%;
    margin-left: 3.8rem;
  }
}

.version-line {
  margin-top: 2rem;
  overflow-y: scroll;

  .features {
    margin-top: 1rem;
    font-size: 2rem;
    font-weight: bold;
  }

  .table-head {
    display: flex;
    font-weight: bold;
    font-size: 1.8rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--el-text-color-regular);
  }

  .table-column-module {
    width: 21%;
  }

  .table-column-content {
    width: 58%;
  }

  .features-item {
    display: flex;
    margin-top: 1.3rem;
    align-items: flex-start;
  }

  .features-item:first-child {
    margin-top: 1rem !important;
  }

  .optimize-and-repair {
    margin-top: 1.5rem;
  }

  .features-item-icon {
    color: #898585;
    margin-right: 1rem;
    margin-top: 0.5rem;
  }

  .features-item-detail {
    font-size: 1.7rem;
    display: contents;
    align-items: center;
    justify-content: flex-start;
  }

  .text-update-module {
    width: 17%;
    margin-right: 3rem;
  }

  .text-update-updateContent {
    width: 55%;
  }

  .text-update-updateBy {
    min-width: 20%;
    margin-left: 2.7rem;
  }
}

.version-text {
  padding-top: 1rem;
  display: flex;
  font-size: 3rem;
  margin-bottom: 3rem;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  color: #747474;

  .keep-duration {
    font-size: 2.3rem;
    font-weight: normal !important;
  }
}


.show-all-version {
  margin-left: 2rem;
  font-size: 1.6rem;
}


.version-form-module-author {
  width: 42rem;
  margin-top: 2rem;
}

.version-form-content {
  margin-top: 2rem;
}

:deep(.el-input__count) {
  opacity: 0.7;
}

.operate-button {
  margin-top: 1.6rem;
}

.version-details-card {
  width: 100%;
}

.delete-details-item {
  margin-left: 2rem;
  margin-right: 2rem;
}

.card-info {
  display: flex;
  align-items: center;
  width: 100%;
}

.card-info:not(:first-child) {
  display: flex;
  align-items: center;
  margin-top: 1.7rem;

}

:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
  color: var(--el-color-white) !important;
}


:deep(.el-radio-button__original-radio:checked+.el-radio-button__inner) {
  background-color: #1A9B92;
  border-color: #1A9B92;
  box-shadow: none;
}

:deep(.el-radio-button__inner) {
  font-size: 1.6rem !important;
}

.version-select {
  width: 18rem;
  --el-select-input-focus-border-color: #1A9B92;
}

:deep(.el-form-item__label) {
  font-size: 1.7rem;
  margin-left: 1rem;
}

.new-link {
  font-size: 1.6rem;
}

:deep(.el-textarea__inner) {
  font-size: 1.8rem !important;
}

:deep(.el-input__inner) {
  font-size: 1.8rem !important;
}

.update-content-form {

  //:deep(.el-form-item__content:is(:first-child)){
  //  max-height: 50rem;
  //  overflow-y: scroll;
  //}
}

.time-line-card {


  max-width: 97%;

  .version-text {
    display: flex;
    font-size: 3rem;
    margin-bottom: 3rem;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    position: absolute;
    right: 0;

    .keep-duration {
      font-size: 2.3rem;
      font-weight: normal !important;
    }
  }

}


.version-input {
  display: flex;
  white-space: nowrap;
  align-items: center;
}

.version-input {
  width: 25rem;
}

.version-date-input {
  width: 70%;
}

.latest-version {
  margin-left: 2rem;
  color: #6dd1a1;
}

:deep(.el-timeline-item__timestamp.is-top) {
  font-size: 3rem;
  font-weight: bold;
}

.version-form {
  margin-top: 2rem;
}

:deep(.el-timeline) {
  padding-left: 0 !important;
}

.version-line :deep(.el-card__body) {
  padding: 2rem !important;
  padding-top: 0 !important;
}

.time-line-publish {
  font-size: 1.7rem;
  margin-top: 1rem;
}

.time-line-per {

}

.time-line-publishTime {
  float: right;
}

.el-textarea__inner:focus {
  outline: 0;
  box-shadow: 0 0 0 1px #1A9B92 inset;
  min-height: 58px;
  height: 58px;
  font-size: 1.6rem;
}

.el-textarea {
  box-shadow: unset !important;
}

.time-line {
  overflow: auto;
  max-height: 60rem;
  padding: 2rem !important;
}

.el-overlay-dialog {
  overflow: hidden !important;
}

.return-button {
  margin-right: 2rem;
  font-size: 1.8rem;
  float: right;
  margin-top: 2rem;
  color: var(--el-color-white);
  background: var(--el-color-primary);
}

.return-button:hover {
  background: var(--el-color-primary-light-3);
}


</style>



